<template>
	<view class="goods-couponInfo">
		<view class="goods-activity-tab" @click="showCoupon=true">
			<view class="activity-left">领劵</view>
			<view class="activity-tab-center coupon-tab">
				<tag type='coupon' :couponList="couponList" />
			</view>
			<view class="activity-right"><u-icon size="28" color="#999" name="arrow-right" class="activity-right-icon"></u-icon></view>
		</view>
		<u-popup v-model="showCoupon" mode="bottom" border-radius="16" :closeable="true" close-icon="close-circle" close-icon-size="48" close-icon-color="#BFBFBF">
			<view class="pop-content-box">
				<scroll-view scroll-y="true" style="height: 100%">
					<view class="pop-content">
						<view class="pop-content-title">可领取优惠券</view>
							<view class="pop-body">
								<scroll-view scroll-y="true" class="scroll-Y">
									<view class="coupon-class platform-coupon">
										<view class="u-m-t-24" v-for="(item,index) in couponList" :key="index">
											<coupon :coupon="item" :type="item.isReceive == 1?1:2" @afterSave="afterSave" :dot-style="{backgroundColor:'#f6f6f6'}"/>
										</view>
									</view>
								</scroll-view>
							</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { mapActions, mapState } from 'vuex';
	import tag from '@/components/activity/tag.vue'
	import coupon from '@/components/cart/coupon.vue'
	export default{
		components:{tag, coupon},
		props:{
			couponList:{
				type:Array,
				default:()=>{}
			},
			goodsId:{
				type:String,
				default:''
			},
		},
		data(){
			return {
				showCoupon:false
			}
		},
		methods:{
			...mapActions(['ActGetGoodsDetail',]),
			afterSave(){
				this.ActGetGoodsDetail({goodsId})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goods-couponInfo{
		.pop-content-box{
			height:100%;
			padding-bottom: 40rpx;
			.pop-body{
				padding:0 24rpx;
				.scroll-Y{
					max-height: 80vh;
					min-height: 40vh;
				}
			}
			.pop-content-title{
				width:100%;
				text-align: center;
				font-size: 32rpx;
				color:$u-main-color;
				font-weight: 700;
				padding-top:32rpx;
				padding-bottom: 40rpx;
			}
		}
		.goods-activity-tab{
			display: flex;
			justify-content: space-between;
			height:88rpx;
			align-items: center;
			padding:0 24rpx;
			.activity-left{
				width:104rpx;
				text-align: justify;
				text-align-last: justify;
				margin-right: 24rpx;
				color:$u-main-color;
				font-weight: 700;
			}
			.activity-tab-center{
				flex: 1;
				overflow: hidden;
				.activity-text{
					flex: 1;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
			.sales-tab{
				display: flex;
			}
			.other-tab{
				display: flex;
			}
		}
	}
</style>
